import React from 'react';
import { Layout, Space } from 'antd';
import Search from '../Home/compoents/Search';
import Title from './Title';
import HashTable from './HashTable';
import styles from './index.less';

const { Header, Footer, Content } = Layout;
const headerStyle = {
  textAlign: 'left',
  color: '#fff',
  height: 64,
  paddingInline: 0,
  lineHeight: '64px',
  backgroundColor: 'inherit',
  marginBottom: '10px',
};
const contentStyle = {
  padding: '20px',
  boxShadow: '0 2px 4px 0 rgba(0,0,0,.1)',
  width: '100%',
  textAlign: 'center',
  minHeight: 50,
  marginBottom: '20px',
  lineHeight: '50px',
  color: '#fff',
  backgroundColor: '#fff',
};
const footerStyle = {
  width: '100%',
  height: '100%',
  lineHeight: '400px',
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#dddd',
  padding: '0',
};

const Detail = () => (
  <Space
    direction="vertical"
    style={{
      width: '100%',
    }}
    size={[0, 48]}
  >
    <Layout>
      <div className={styles.all}>
        <Header style={headerStyle}>
          <Title></Title>
        </Header>
        <Content style={contentStyle}>
          <Search></Search>
        </Content>
        <Footer style={footerStyle}>
          <HashTable></HashTable>
        </Footer>
      </div>
    </Layout>
  </Space>
);
export default Detail;
